import LayoutApp from '@/components/Layout'
import './App.css'
import zhCN from 'antd/locale/zh_CN'
import { ConfigProvider, theme } from 'antd'
import { useSelector } from 'react-redux'
import { RootState } from './store/store'
import { Route, Routes, useNavigate } from 'react-router-dom'
import Login from './views/Login'
import { useEffect } from 'react'
import KeepAliveLayout from './components/KeepAlive'
import { routers } from './router'

function App() {
  const nav = useNavigate()
  const isDark = useSelector((state: RootState) => state.system.isDark)
  const token = localStorage.getItem('PROJECT_TOKEN')
  useEffect(() => {
    if (!token) {
      nav('/login')
    }
  }, [])
  return (
    <ConfigProvider
      locale={zhCN}
      theme={{ algorithm: isDark ? theme.darkAlgorithm : theme.defaultAlgorithm }}
    >
      <KeepAliveLayout keepPaths={['/', '/about/agent', '/about/product', '/person']}>
        <Routes>
          <Route path="/login" Component={Login} />
          <Route path="/" Component={LayoutApp}>
            {routers.map((router) => {
              if (router.children) {
                const childrens = router.children
                return childrens.map((children) => {
                  return (
                    <Route key={children.path} path={children.path} Component={children.element} />
                  )
                })
              }
              return <Route key={router.path} path={router.path} Component={router.element} />
            })}
          </Route>
        </Routes>
      </KeepAliveLayout>
    </ConfigProvider>
  )
}

export default App
